<template>
	<div>
		<div style="margin: 0 auto;" class="col-10">
			<form id="createForm" action="#">
				<div>
					<h4>创建部门</h4>
				</div>
				<div class="form-group">
					<label for="code" class="col-1">部门编号:</label>
					<input type="text" v-model="form.code" class="form-control col-4" id="code" placeholder="请输入部门编号">
					<span class="text-danger">*</span>
				</div>
				<div class="form-group">
					<label for="name" class="col-1">部门名称:</label>
					<input type="text" v-model="form.name" class="form-control" id="name" placeholder="请输入部门名称">
					<span class="text-danger">*</span>
				</div>
				<div class="form-group">
					<label for="remark" class="col-1">备注:</label>
					<textarea class="form-control col-8" v-model="form.remark" id="remark" placeholder="请填写备注"></textarea>
				</div>
				<div class="form-group" style="text-align:center">
					<el-button @click="resetForm">重填</el-button>
					<el-button type="primary" @click="submitForm">创建</el-button>
				</div>
			</form>
		</div>
	</div>
</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import api from '../../api/index.js';
	const form = reactive({
		code: '',
		name: '',
		remark: ''
	});
	const {proxy}=getCurrentInstance();
	//提交按钮
	const submitForm = async () => {
		if ('' == form.code) {
			ElMessage.warning('请输入部门编号');
			return;
		}
		if ('' == form.name) {
			ElMessage.warning('请输入部门名称');
			return;
		}
		let responseData = await api.department.create(form);
		let code = responseData.code;
		if (200 !== code) {
			ElMessage.warning(`创建失败【${responseData.message}】`);
			return;
		}
		let rows = responseData.data;
		if (1 == rows) {
			ElMessage.success('创建成功');
			proxy.$parent.$parent.$parent.reloadData();
		} else {
			ElMessage.warning(`创建部门,服务器返回未知的状态`);
		}
	}
	//重新填写数据
	const resetForm = () => {
		form.code = '';
		form.name = '';
		form.remark = '';
	};
</script>

<style scoped>
	@import url('../../assets/css/dml.css');
</style>